<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/OL_SDK/include-openlayers-local.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #btn {
            position: fixed;
            z-index: 1000;
            width: 200px;
            height: 60px;
            top: 30px;
            left: 70px;
        }
    </style>
</head>

<body>
    <button id="btn" onclick="toggleMap()">图层切换</button>
    <div id="map">

    </div>
    <script>
        var gaode_vector = new ol.layer.Tile({
            title: "高德地图-矢量图层",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            }),
            // visible: false
        });
        var gaode_image = new ol.layer.Tile({
            title: "高德地图-影像图层",
            source: new ol.source.XYZ({
                url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
                wrapX: false
            })
        })
        const map = new ol.Map({
            target: "map",
            /* 设置地图图层 */
            layers: [gaode_image, gaode_vector],
            /* view设置地图 以坐标,中心点,放大级别 */
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 4,
                //经纬度坐标系
                projection: "EPSG:4326"
            })
        })
        /* opacity */
        function toggleMap() {
            var res = gaode_vector.get("visible")
            console.log(res) // true / false
            if (res) {
                gaode_vector.setVisible(false)
            } else {
                gaode_vector.setVisible(true)
            }
        }

    </script>
</body>

</html>